<template>
    <div id="tepl">
        <!-- 实现新闻详情 -->
        <div class="title">
            <h4>{{info.title}}</h4>
            <span>{{info.click}}次浏览</span>
            <span id="ls">{{info.add_time}}</span>
            </div>

        <div id="content" v-html="info.content"></div>
        <!-- 实现评论组件的集成 -->
        <comment :id="id"></comment>
    </div>
</template>
<script>
import comment from '../subcom/comment.vue';
export default {
    components:{
        comment   //注册评论组件
    },
    data(){
        return {
            id:0,
            info:[]
        }
    },
    created(){
        this.id = this.$route.params.id;
        this.getinfo();
    },
    methods:{
        getinfo(){
            var url = '../../statics/api/news.json';
            this.$http.get(url).then(function(res){
                var body = res.body;
                if(body.status != 0){
                    alert(body.message);
                }
                this.info = body.message[this.id-1];
            })

        }
    }
    
}
</script>
<style scoped>
.title,#content{
    margin: 5px;
}
h4{
    color: #120224;
}
span {
    font-size: 14px;
    color: #336fd3;
}
#ls{
    margin-left: 4px;
}
</style>


